<template>
  <div class="confirm">
    <fx-card title="基础用法">
      <fx-button @click="baseConfirm">点击确认弹窗</fx-button>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="关闭前判断">
      <fx-button @click="beforeConfirm">关闭前弹窗</fx-button>
      <template #hide>
        <pre v-highlight="before"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="自定义">
      <fx-button @click="optionBtnConfirm">自定义弹窗(取消模态层,自定义宽度,顶部距离)</fx-button>
      <fx-button @click="optionCloseConfirm" class="ml10">取消点击遮罩/Esc关闭</fx-button>
      <template #hide>
        <pre v-highlight="option"><code></code></pre>
      </template>
    </fx-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { FxConfirm, FxMessage } from '@/base'
import { defaultContent } from '@/assets/menuList'

const test = (): Promise<number> => new Promise(resolve => setTimeout(() => resolve(Math.random()), 1000))

export default defineComponent({
  name: 'viewConfirm',
  setup () {
    const baseConfirm = (): void => {
      FxConfirm(defaultContent, '自定义标题').then(() => {
        FxMessage.success('确定')
      }).catch(() => {
        FxMessage.warning('取消')
      })
    }
    const beforeConfirm = (): void => {
      FxConfirm({
        content: defaultContent,
        title: '自定义标题',
        beforeClose: async (action, app, next) => {
          FxMessage.success(`当前点击类型 ${action}`)
          if (action === 'define') {
            app.setDefineLoading(true)
            const random = await test()
            app.setDefineLoading(false)
            if (random > 0.5) {
              FxMessage.warning('提交失败!')
            } else {
              next()
            }
          } else if (action === 'cancel') {
            app.setCancelLoading(true)
            setTimeout(() => {
              next()
            }, 1000)
          } else {
            next()
          }
        }
      }).then(() => {
        FxMessage.success('确定')
      }).catch(action => {
        FxMessage.warning(action)
      })
    }
    const optionBtnConfirm = (): void => {
      FxConfirm({
        width: '600px',
        top: '20%',
        showModal: false,
        content: '自定义内容',
        title: '自定义标题',
        cancelText: '错误',
        defineText: '正确',
        roundButton: true
      }).then(() => {
        FxMessage.success('确定')
      }).catch(action => {
        FxMessage.warning(action)
      })
    }
    const optionCloseConfirm = (): void => {
      FxConfirm({
        content: '自定义内容',
        title: '自定义标题',
        closeOnEscape: false,
        closeOnModal: false
      }).then(() => {
        FxMessage.success('确定')
      }).catch(action => {
        FxMessage.warning(action)
      })
    }

    const base = `<fx-button @click="baseConfirm">点击确认弹窗</fx-button>

export default defineComponent({
    setup() {
      const baseConfirm = (): void => {
        FxConfirm(defaultContent, '自定义标题').then(() => {
          FxMessage('确定')
        }).catch(() => {
          FxMessage('取消')
        })
      }
    }
})`

    const before = `<fx-button @click="beforeConfirm">关闭前弹窗</fx-button>

export default defineComponent({
    setup() {
      const test = (): Promise<number> => new Promise(resolve => setTimeout(() => resolve(Math.random()), 1000))
      const beforeConfirm = (): void => {
      FxConfirm({
        content: defaultContent,
        title: '自定义标题',
        beforeClose: async (action, app, next) => {
          FxMessage.success('当前点击类型' + action)
          if (action === 'define') {
            app.setDefineLoading(true)
            const random = await test()
            app.setDefineLoading(false)
            if (random > 0.5) {
              FxMessage.warning('提交失败!')
            } else {
              next()
            }
          } else if (action === 'cancel') {
            app.setCancelLoading(true)
            setTimeout(() => {
              next()
            }, 1000)
          } else {
            next()
          }
        }}).then(() => {
          FxMessage.success('确定')
        }).catch(action => {
          FxMessage.warning(action)
        })
      }
    }
})`

    const option = `<fx-button @click="optionBtnConfirm">自定义按钮</fx-button>
<fx-button @click="optionCloseConfirm" class="ml10">取消点击遮罩/Esc关闭</fx-button>

export default defineComponent({
    setup() {
      const optionBtnConfirm = (): void => {
        FxConfirm({
          width: 1000,
          top: '20%',
          content: '自定义内容',
          title: '自定义标题',
          cancelText: '错误',
          defineText: '正确',
          roundButton: true
        }).then(() => {
          FxMessage.success('确定')
        }).catch(action => {
          FxMessage.warning(action)
        })
      }
      const optionCloseConfirm = (): void => {
        FxConfirm({
          content: '自定义内容',
          title: '自定义标题',
          closeOnEscape: false,
          closeOnModal: false
        }).then(() => {
          FxMessage.success('确定')
        }).catch(action => {
          FxMessage.warning(action)
        })
      }
    }
})`

    return {
      base,
      before,
      option,
      beforeConfirm,
      optionBtnConfirm,
      optionCloseConfirm,
      baseConfirm
    }
  }
})
</script>

<style scoped lang="scss">
.confirm {
}
</style>
